﻿@model IEnumerable<QuanLyGiaoVuUI.Models.DangKyGioDay.DangKyGioDayViewModel>
@using QuanLyGiaoVuUI.Models.DangKyGioDay;

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="@Url.Content("~/Content/css/timetable/bootstrap.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/timetable/bootstrap-responsive.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/timetable/docs.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/timetable/tribal-bootstrap.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/css/timetable/tribal-timetable.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/js/jsToastMessage/resources/css/jquery.toastmessage.css")" rel="stylesheet" />

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.8.2.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/timetable/jquery.ba-resize.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/timetable/bootstrap-tooltip.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/timetable/bootstrap-collapse.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/timetable/tribal.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/timetable/tribal-shared.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/timetable/tribal-timetable.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/js/jsToastMessage/javascript/jquery.toastmessage.js")"></script>

    <title>Xếp lịch giảng dạy</title>

    <style>
        body {
            background-color: #2E5E79 !important;
            padding-top: 10px !important;
        }

        h2 {
            color: #fff;
            margin: 10px;
        }

        .hiddenItem {
            opacity: 0.4;
            filter: alpha(opacity=40); /* For IE8 and earlier */
        }

        .highlightedItem {
            border-width: 3px;
            border-color: #00ff21;
        }

        .chuaDuocXepLich {
            border-width: 3px;
            border-color: #f00;
        }
        
        .sang {
        }

        .chieu {
        }

        div#header-fixed {position:fixed; bottom:0px; margin:auto; z-index:100000; width:100%;overflow: hidden; padding: 0 !important;}

        .menu-item {
            width: 100px;
            float: left;
            margin: 10px;
        }
            .menu-item input {
                width: 100%;
            }

        div#container {
        }

        div.header-part {
            overflow: hidden;
            float: left;
            margin-left: 20px;
            margin-right: 20px;
        }

        div#ajax-form-div {
            display: none;
        }

    </style>

</head>
<body data-offset="50">
    <div id="ajax-form-div">
    @{using (Ajax.BeginForm("XepLichTuDong", "XepLich", new AjaxOptions
              {
                  OnSuccess = "ShowSelectedClass"
              }))
              { 
                <input type="submit" id="btnXepLich" value="Xếp lịch" />
              }
     }
        @{using (Ajax.BeginForm("LuuKetQua", "XepLich", new AjaxOptions
                  {
                      HttpMethod = "POST",
                      OnSuccess = "LuuKetQuaXong"
                  }))
                  {
                      <div id="danhSachId"></div>
                      <input type="submit" id="btnLuuKetQua" value="" onclick="TaoDanhSachId()" />
                  }
                }
    </div>          
    <div id="header-fixed" class="well hiddenItem">
        <div class="header-part" id="menu">
            <div class="menu-item">
                <input type ="button" value="Xếp lịch" onclick="XepLichClick()" />
            </div>
            <div class="menu-item">
                 <input type ="button" value="Lưu kết quả" onclick="LuuKetQuaClick()" />
            </div>
            <div class="menu-item">
                <input type ="button" value="Xuất lịch" onclick="OpenXuatLichDialog()" />
            </div>
        </div>
    </div>
    <div id="container" class="container">
        <h2>Xếp lịch giảng dạy</h2>
        <div class="timetable" data-days="5" data-hours="11">
            <ul class="tt-events">

                @{foreach (DangKyGioDayViewModel item in Model)
                  {
                      string className = string.Empty;
                      if (item.DoUuTien == 1)
                      {
                          className = "btn-danger";
                      }
                      else
                          if (item.DoUuTien == 2)
                          {
                              className = "btn-primary";
                          }
                          else
                              if (item.DoUuTien == 3)
                              {
                                  className = "btn-warning";
                              }
                              else
                              {
                                  className = "btn-success";
                              }
                    <li class="tt-event @className" data-malopmonhoc="@item.MaLopMonHoc" id="@item.MaThongTinGiangDay" data-duocchon="@item.DuocChon" data-douutien="@item.DoUuTien" data-id="@item.MaThongTinGiangDay" data-day="@(item.Thu - 2)" data-start="@(item.TietDauDTO.GioBatDau.TotalMinutes / 60 - 7)" data-duration="@(item.TietSauDTO.GioKetThuc.Subtract(item.TietDauDTO.GioBatDau).TotalMinutes / 60)">
                        @item.LopMonHocDTO.MaLopVaTenMonHoc
                        <br />
                        @item.TietDauDTO.GioBatDau.ToString() - @item.TietSauDTO.GioKetThuc.ToString()
                        <br />
                        @(item.GiangVienDTO.HocHam.VietTat + " " + item.GiangVienDTO.HocVi.VietTat + ". " + item.GiangVienDTO.HoTenGV)
                        <br />
                        @(item.LopMonHocDTO.LopSinhVien == null ? "Lớp chung" : item.LopMonHocDTO.LopSinhVien.TenLop)
                        <br />
                        @("Độ ưu tiên: " + item.DoUuTien)
                      </li>
                  }
                }
            </ul>
            <div class="tt-times">
                <div class="tt-time sang" data-time="0">
                    7<span class="hidden-phone">:00</span>
                </div>
                <div class="tt-time sang" data-time="1">
                    8<span class="hidden-phone">:00</span>
                </div>
                <div class="tt-time sang" data-time="2">
                    9<span class="hidden-phone">:00</span>
                </div>
                <div class="tt-time sang" data-time="3">
                    1<span class="hidden-phone">0:00</span>
                </div>
                <div class="tt-time sang" data-time="4">
                    1<span class="hidden-phone">1:00</span>
                </div>
                <div class="tt-time sang" data-time="5">
                    1<span class="hidden-phone">2:00</span>
                </div>
                <div class="tt-time" data-time="6">
                    1<span class="hidden-phone">3:00</span>
                </div>
                <div class="tt-time chieu" data-time="7">
                    1<span class="hidden-phone">4:00</span>
                </div>
                <div class="tt-time chieu" data-time="8">
                    1<span class="hidden-phone">5:00</span>
                </div>
                <div class="tt-time chieu" data-time="9">
                    1<span class="hidden-phone">6:00</span>
                </div>
                <div class="tt-time chieu" data-time="10">
                    1<span class="hidden-phone">7:00</span>
                </div>
            </div>
            <div class="tt-days">
                <div class="tt-day" data-day="0">
                    T<span class="hidden-phone">hứ Hai</span>
                </div>
                <div class="tt-day" data-day="1">
                    T<span class="hidden-phone">hứ Ba</span>
                </div>
                <div class="tt-day" data-day="2">
                    T<span class="hidden-phone">hứ Tư</span>
                </div>
                <div class="tt-day" data-day="3">
                    T<span class="hidden-phone">hứ Năm</span>
                </div>
                <div class="tt-day" data-day="4">
                    T<span class="hidden-phone">hứ Sáu</span>
                </div>
                <div class="tt-day" data-day="4">
                    T<span class="hidden-phone">hứ Bảy</span>
                </div>
            </div>
        </div>
        <div class="row">
        </div>
    </div>

    <div id="contextMenuDialog"></div>
    <div id="huyDangKyDialog"></div>
    <div id="xuatLichDialog"></div>

    <script>
        function ShowSelectedClass(data) {
                $("li.tt-event").addClass("hiddenItem");
                for (var index = 0; index < data.DanhSachLopXepThanhCong.length; index++) {
                    $("#" + data.DanhSachLopXepThanhCong[index].MaThongTinDangKyGioDay).removeClass("hiddenItem");
                }
                if (data.Success == false)
                {
                    var thongBao = "Không thể xếp lịch cho các lớp sau đây: <br />";
                    for (var index = 0; index < data.DanhSachLopChuaXepLich.length; index++) {
                        var maLop = data.DanhSachLopChuaXepLich[index].LopMonHocId;
                        $("li.tt-event").each(function () {
                            var maLopMonHoc = $(this).data("malopmonhoc");
                            if (maLopMonHoc == maLop) {
                                $(this).addClass("chuaDuocXepLich");
                            }
                        });
                        thongBao += data.DanhSachLopChuaXepLich[index].MaLopMonHoc + "-" + data.DanhSachLopChuaXepLich[index].MonHoc.TenMonHoc;
                    }
                    showStickyWarningToast(thongBao);
                }
        }

        $(document).ready(function () {
            //load dialog
            $("#contextMenuDialog").load("/XepLich/XepLichContextMenu");
            $("#huyDangKyDialog").load("/XepLich/HuyDangKyDialog");
            $("#contextMenuDialog").dialog({
                autoOpen: false, modal: true, width: 350, height: "auto", title:"Tùy chọn"
            });
            $("#huyDangKyDialog").dialog({
                autoOpen: false, modal: true, width: 300, height: "auto", title: "Tùy chọn",
                buttons: {
                    "Xác nhận hủy": function () {
                        $("#btnXacNhanHuy").click();
                    },
                    "Không hủy": function () {
                        $("#huyDangKyDialog").dialog("close");
                    }
                }
            });

            $("#xuatLichDialog").load("/XepLich/XuatLich").dialog({
                autoOpen: false, model: true, width: 400, height: "auto", title: "Xuất lịch",
                buttons: {
                    "Xuất lịch": function () {
                        $("#uploadTemplate").submit();
                    },
                    "Hủy": function () {
                        $("#xuatLichDialog").dialog("close");
                    }
                }
            });

            $("li.tt-event").removeAttr("title");
            $("li.tt-event").addClass("hiddenItem");

            $("li.tt-event").each(function () {
                //left click event
                $(this).bind("click", function () {
                    $("li.tt-event").removeClass("highlightedItem");
                    $("li.tt-event").removeClass("chuaDuocXepLich");
                    $(this).addClass("highlightedItem");
                    var maLopMonHoc = $(this).data("malopmonhoc");
                    $("li.tt-event").each(function () {
                        var maLop = $(this).data("malopmonhoc");
                        if (maLop == maLopMonHoc)
                            $(this).addClass("highlightedItem");
                    });
                });

                //double click event
                $(this).bind("dblclick", function () {
                    $("#dangKyHienTai").val($(this).data("id"));
                    $("#contextMenuDialog").dialog("open");
                    return false;
                });

                //To sang cac dang ky duoc chon
                if ($(this).data("duocchon") == "True")
                    $(this).removeClass("hiddenItem");

            });

            $(".tt-days").attr("style","");
            $(".tt-days").css({
                "width": "65px",
                "top": "29px"
            });

            //register events
            $("#header-fixed").hover(function () {
                $(this).removeClass("hiddenItem");
            }, function () {
                if (!$(this).hasClass("hiddenItem"))
                    $(this).addClass("hiddenItem");
            });

        });

        function TaoDanhSachId()
        {
            $("#danhSachId").html("");
            $("li.tt-event").each(function () {
                if (!$(this).hasClass("hiddenItem"))
                {
                    $("#danhSachId").append('<input type="hidden" value="'+ $(this).data("id") +'" name="danhSachMaDangKyGioDay" id="danhSachMaDangKyGioDay" />');
                }
            });
            return true;
        }

        function LuuKetQuaXong(data) {
            if (data.message == null)
                $().toastmessage('showNoticeToast', "Lưu thành công");
            else {
                showStickyWarningToast(data.message);
            }
        }

        function Chon(id) {
            $("li.tt-event").removeClass("highlightedItem");
            var maLopMonHoc = $("#" + id).data("malopmonhoc");
            $("li.tt-event").each(function () {
                var maLop = $(this).data("malopmonhoc");
                if (maLop == maLopMonHoc)
                    $(this).addClass("hiddenItem");
            });
            $("#" + id).removeClass("hiddenItem");
            $("#contextMenuDialog").dialog("close");
        }

        function Huy(id) {
            $("#contextMenuDialog").dialog("close");
            $("#maDangKyHuy").val($("#dangKyHienTai").val());
            $("#huyDangKyDialog").dialog("open");
        }

        function HuyThanhCong(data) {
            if (data.message != null)
                alert(data.message);
            if (data.success = true) {
                $("#huyDangKyDialog").dialog("close");
                $("li.tt-event").removeClass("highlightedItem");
                var id = $("#maDangKyHuy").val();
                $("#" + id).css("display","none");
            }
        }

        function OpenXuatLichDialog() {
            $("#xuatLichDialog").dialog("open");
        }

        function showStickyWarningToast(message) {
            $().toastmessage('showToast', {
                text: message,
                sticky: true,
                position: 'top-right',
                type: 'warning',
                closeText: '',
                close: function () {
                    console.log("toast is closed ...");
                }
            });
        }

        function XepLichClick() {
            $("#btnXepLich").click();
        }

        function LuuKetQuaClick() {
            $("#btnLuuKetQua").click();
        }
    </script>
</body>
</html>
